<template>
  <!-- 顶部信息模块 -->
  <view v-if="true">
    <!-- 店铺信息 -->
    <view class="top">
      <view class="top_top">
        <image :src="BaseURL + orderDetail.logo"></image>
        <view class="right">
          <text class="title">{{ orderDetail.shop_name }}</text>
          <view class="platform">
            <text class="platform_text">活动平台：</text>
            <view class="sub_title_label1" v-if="orderDetail.type === 1">美团</view>
            <view class="sub_title_label" v-if="orderDetail.type === 2">饿了么</view>
            <view class="sub_title_label2" v-if="orderDetail.type === 3">京东</view>
          </view>
          <view class="address">
            <image :src="BaseImgUrl + '/group/adr_icon.png'"></image>
            <text class="address_text">{{ orderDetail.address }}</text>
          </view>
        </view>
      </view>
      <u-line style="margin-top: 20rpx"></u-line>
      <!-- 账单详情模块 -->
      <view class="top_content">
        <view class="sub_content">
          <view class="sub_title">账单日期</view>
          <view class="sub_title1">{{
              orderDetail.date
            }}{{ orderDetail.merge_date ? ('~' + orderDetail.merge_date) : '' }}
          </view>
        </view>
        <view class="sub_content">
          <view class="sub_title">待结算订单数</view>
          <view class="sub_title1">{{ orderDetail.order_num }}单</view>
        </view>
        <view class="sub_content">
          <view class="sub_title">账单支付状态</view>
          <view class="sub_title1" :style="orderDetail.is_pay !==1 ?'color: #F9661C':'color: #2dc197'">
            {{ orderDetail.is_pay !== 1 ? '待支付' : '已支付' }}
          </view>
        </view>
        <view class="sub_content">
          <view class="sub_title">合计待支付金额</view>
          <view class="sub_title1 money">￥{{ orderDetail.pay_amount }}</view>
        </view>
        <view style="margin-top: 20rpx">
          <text class="sub_title trip">温馨提示：</text>
          <text class="trip_content">支付时请使用系统付款，切勿私自给业务员转账</text>
        </view>
      </view>
      <u-line style="margin-top: 20rpx"></u-line>
      <!-- 操作按钮模块 -->
      <view class="top_bottom">
        <view class="btn_content">
          <image :src="BaseImgUrl + '/group/zddc_icon.png'"></image>
          <uni-link :href="BaseURL + orderDetail.bill_exp_excel" text="导出账单" :showUnderLine="false">
            <text class="top_bottom_text">导出账单</text>
          </uni-link>
        </view>
        <view class="btn_content" @click="callTel">
          <image :src="BaseImgUrl + '/group/server_icon.png'"></image>
          <text class="top_bottom_text">联系业务员</text>
        </view>
      </view>
    </view>
    <!-- 订单列表模块 -->
    <view class="content">
      <view class="order_item" v-for="(item,index) in orderList" :key="index">
        <view class="order_no" @click="copyData(item.user_pay_order_no)">
          <text>订单号：{{ item.user_pay_order_no }}</text>
          <view style="width: 10rpx"></view>
          <view style="color: #26b2f1;text-decoration: #1db9ff;text-decoration-line: underline;font-size: 26rpx">复制
          </view>
        </view>
        <u-line style="margin-top: 20rpx"></u-line>
        <view class="order_time">
          <text>下单时间：{{ item.create_time }}</text>
          <view style="width: 10rpx"></view>
        </view>
        <view class="order_user_pay">
          <view class="user_pay_content">
            <text>
              用户付款金额：
            </text>
            <text class="pay_money">
              ￥{{ item.user_pay_amount }}
            </text>
          </view>
          <view>
            <text>
              商家应付：
            </text>
            <text class="pay_money">
              ￥{{ item.shop_pay_amount }}
            </text>
          </view>
        </view>
        <view class="labs">
          <view class="pj" v-if="item.is_comment===2">
            此单无需评价
          </view>
          <view class="qrs" v-if="item.check_status===1 || item.check_status===2">
            官方校验通过
          </view>
          <view class="null"></view>
          <view class="why" v-if="item.check_status===1 || item.check_status===2" @click="why">
            什么是官方校验
            <image :src="BaseImgUrl + '/guanfan/home/yiwen.png'" mode="widthFix"/>
          </view>
        </view>
        <view class="images" v-if="item.is_comment!==2 || (item.check_status!==1 && item.check_status!==2)">
          <image
              @click="showImg(item.user_comment_img.startsWith('http') ? item.user_comment_img : BaseURL + item.user_comment_img,item)"
              v-if="item.user_comment_img"
              :src="(item.user_comment_img.startsWith('http') ? item.user_comment_img : BaseURL + item.user_comment_img)"></image>
          <image
              @click="showImg(item.user_order_img.startsWith('http') ? item.user_order_img : BaseURL + item.user_order_img,item)"
              v-if="item.user_order_img"
              :src="(item.user_order_img.startsWith('http') ? item.user_order_img : BaseURL + item.user_order_img)"></image>
          <image
              @click="showImg(item.user_pay_img.startsWith('http') ? item.user_pay_img : BaseURL + item.user_pay_img,item)"
              v-if="item.user_pay_img"
              :src="(item.user_pay_img.startsWith('http') ? item.user_pay_img : BaseURL + item.user_pay_img)"></image>
        </view>
      </view>
    </view>
    <view style="height: 260rpx">

    </view>
    <!-- 底部操作栏模块 -->
    <view style="bottom: 0;background-color: white;position: fixed;width: 100%;">
      <view class="bottom">
        <view style="display: flex;align-items: center" @click="back">
          <u-icon name="arrow-left" size="22" color="#666666"></u-icon>
          <text style="color: #666666"> 返回首页</text>
        </view>
        <view style="height: 36rpx;width: 1rpx;background-color: #888888;margin-left: 20rpx"></view>
        <view class="pay_content">
          <view class="money">{{ orderDetail.pay_amount }}
            <text style="font-size: 20rpx"> 元</text>
          </view>
          <view class="money_tip">{{ orderDetail.is_pay !== 1 ? '待支付金额' : '已支付金额' }}</view>
        </view>
        <view :class="orderDetail.is_pay === 0 ?'order_pay':'order_pay1'" @click="pay_order">
          {{ orderDetail.is_pay === 0 ? '立即支付' : '账单已支付' }}
        </view>
      </view>
      <u-safe-bottom></u-safe-bottom>
    </view>
    <!-- 支付方式选择弹窗模块 -->
    <u-popup :show="showPay" mode="bottom" radius="10" closeable @close="showPay = false">
      <view class="pay_type">选择支付方式</view>
      <view class="popup_content">
        <!-- 后台控制支付方式 -->
        <view class="pay-way">
          <view class="radio-list">
            <view style="display: flex;flex-direction: column;">
              <view class="radio-one">
                <view class="radio-left" @tap="NewradioChange" :data-type="item.type"
                      v-for="(item, index) in payTypeList" :key="index">
                  <image v-if="item.name === '余额支付'" :src="BaseImgUrl + '/images/ye_icon.png'"></image>
                  <image v-if="item.name === '微信支付'" :src="BaseImgUrl + '/images/wx_icon.png'"></image>
                  <image v-if="item.name === '支付宝支付'" :src="BaseImgUrl + '/images/zfb_icon.png'"></image>
                  <view class="radio-int">{{ item.name }}</view>
                  <view class="dianji">
                    <image v-if="NewPayType === item.type" class="check_icon"
                           :src="BaseImgUrl + '/images/select_fill.png'"></image>
                    <image v-else class="check_icon" :src="BaseImgUrl + '/images/select_icon.png'"></image>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <button class="submit" @tap="pay">
          立即支付
        </button>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
import {nextTick, ref} from "vue";
import {BaseImgUrl, BaseURL} from "../../utils/lshttp";
import {useUserInfoStore} from "../../stores/modules/userInfo";
import {onLoad, onShow} from "@dcloudio/uni-app";
import {aliPayAPI, billDetailAPI, wechatPayAPI} from "../../services/buisiness";
import {getOfficialAccountInfoAPI} from "../../services/login";

const useUser = useUserInfoStore()
const showPay = ref(false)
const payTypeList = ref([
  {
    name: '微信支付',
    type: 'wechat',
  },
  {
    name: '支付宝支付',
    type: 'app_alipay',
  }
])
const orderDetail = ref()
const orderList = ref([])
// 官方校验通过：1、无需评论 无图 2、需评论 一张图
// 官方校验不通过：1、无需评论 两张图 2、需评论 3张图
const back = () => {
  if (isAuth.value !== 1) {
    uni.navigateBack()
    return
  }
  uni.reLaunch({
    url: '/pages/business_order/order_list?shopId=' + shopID.value,
  });
}

const authWX = async () => {
  if (useUser.openID) return true;
  let code = getUrlParam("code"); //是否存在code 截取code代码 授权会返回code需要截取链接中code
  if (code == null || code === '' || h5WxCode.value === '') {
    const res = await getOfficialAccountInfoAPI()
    let url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + res.result.appid + '&redirect_uri=' +
        encodeURIComponent(BaseURL + '/business/index.html#/pages/business_order/order_detail?shopId=' + shopID.value + "&bill_id=" + billId.value + "&isAuth=" + 1) +
        '&response_type=code&scope=snsapi_userinfo&connect_redirect=1#wechat_redirect';
    console.log("authWX url", url)
    window.location.replace(url);
    return false
  }
  h5WxCode.value = code;
  return true
}

const getUrlParam = (name) => {
  // #ifdef H5
  // 判断公众号截取code
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [undefined,
    ''
  ])[1].replace(/\+/g, '%20')) || null
  // #endif
}
const why = () => {
  uni.showModal({
    title: '什么是官返校验？',
    content: '平台已获得美团订单校验功能，如有标签提示“官方校验通过”的订单则为美团侧订单真实有效;商户不用担心该类订单不存在或存在异常情况。',
    confirmText: '我知道了',
    showCancel: false
  })
}
const showImg = (url, item) => {
  let imgs = []
  let img1 = ''
  if (item.user_comment_img) {
    img1 = item.user_comment_img.startsWith('http') ? item.user_comment_img : BaseURL + item.user_comment_img
    imgs.push(img1)
  }
  let img2 = ''
  if (item.user_order_img) {
    img2 = item.user_order_img.startsWith('http') ? item.user_order_img : BaseURL + item.user_order_img
    imgs.push(img2)
  }
  let img3 = ''
  if (item.user_pay_img) {
    img3 = item.user_pay_img.startsWith('http') ? item.user_pay_img : BaseURL + item.user_pay_img
    imgs.push(img3)
  }
  uni.previewImage({
    current: url,
    // 当前显示图片的http链接
    urls: imgs // 需要预览的图片http链接列表
  });
}
const NewPayType = ref('wechat')
const NewradioChange = (evt) => {
  NewPayType.value = evt.currentTarget.dataset.type
}
const pay_order = () => {
  if (orderDetail.value.is_pay === 1) {
    uni.showToast({
      title: '账单已支付请勿重复支付',
      icon: 'none',
      duration: 3000
    })
    return
  }
  showPay.value = true
}
const billId = ref()
const shopID = ref()
const h5WxCode = ref()
const isLoading = ref(false)
const isAuth = ref(0)
onLoad((options) => {
  console.log("options--->>>", options)
  billId.value = options.bill_id
  shopID.value = options.shopId
  isAuth.value = options?.isAuth
  h5WxCode.value = options.h5WxCode
  if (isAuth.value == 1) {
    pay()
  }
})
onShow(async () => {
  await getBillDetail()
})

const getBillDetail = async () => {
  const res = await billDetailAPI({bill_id: billId.value})
  console.log("getBillDetail--->>>", res)
  orderDetail.value = res.result.bill
  orderList.value = res.result.order_list
  // setTimeout(() => {
  //   isLoading.value = true
  // }, 100)
}
const pay = async () => {
  showPay.value = false
  // 支付宝支付
  if (NewPayType.value === 'app_alipay') {
    const returnUrl = BaseURL + '/business/index.html#/pages/business_order/order_alipay?shopId=' + shopID.value + "&bill_id=" + billId.value
    const res = await aliPayAPI({ids: billId.value, return_url: returnUrl})
    useUser.setPayForm(res.result[0])
    console.log("app_alipay", res.result[0])
    document.querySelector('body').innerHTML = res.result[0].split("<script>")[0];
    await nextTick(() => {
      window.document.forms[0].submit()
    })
    return
  }

  // 微信支付
  if (!await authWX()) return
  wechatPayAPI({ids: billId.value, code: h5WxCode.value, openid: useUser.openID}).then(res => {
    useUser.setOpenID(res.result.openid)
    console.log("wechatPayAPI1--->>>", res)
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
          appId: res.result.appId,
          timeStamp: res.result.timeStamp,
          nonceStr: res.result.nonceStr,
          package: res.result.package,
          signType: res.result.signType,
          paySign: res.result.paySign,
        },
        function (res1) {
          if (res1.err_msg === "get_brand_wcpay_request:ok") {
            uni.showToast({
              title: '支付成功',
              icon: 'none',
            });
          } else {
            uni.showToast({
              title: "取消支付",
              icon: 'none',
            });
          }
        });
  }).catch((res) => {
    if (res.data.status === 3) {
      console.log("wechatPayAPI2--->>>", res)
      uni.showToast({title: res.data.msg, icon: 'none'})
      // useUser.clearOpenID();
      // h5WxCode.value = ''
      // authWX()
    }
  })
}
const callTel = () => {
  uni.makePhoneCall({
    phoneNumber: orderDetail.value.tel,
  })
}
const copyData = (data) => {
  console.log('copy', data)
  uni.setClipboardData({
    data: data.toString(),
    success() {
      uni
          .showToast({
            title: '复制成功',
            icon: 'none',
          })
          .then(() => {
          })
    },
  })
}

</script>


<style lang="scss" scoped>
page {
  background-color: #F6F6F6;
}

view {
  box-sizing: border-box;
}

.top {
  background-color: white;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 16rpx;
}

.top_top {
  display: flex;

  image {
    width: 168rpx;
    height: 168rpx;
    border-radius: 16rpx;
  }

  .right {
    margin-left: 16rpx;
    flex: 1;
    display: flex;
    flex-direction: column;

    .platform {
      flex: 1;
      display: flex;

      .platform_text {
        color: black;
        font-size: 26rpx;
      }
    }

    .title {
      font-size: 32rpx;
      font-weight: bold;
      min-height: 60rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .address {
      margin-bottom: 10rpx;
      display: flex;

      image {
        width: 32rpx;
        height: 32rpx;
      }

      .address_text {
        font-size: 25rpx;
        flex: 1;
        //overflow: hidden;
        //text-overflow: ellipsis;
        //display: -webkit-box;
        //-webkit-line-clamp: 1;
        //-webkit-box-orient: vertical;
      }
    }
  }
}

.top_content {
  margin-top: 20rpx;
  font-size: 26rpx;

  .sub_content {
    display: flex;
    margin-bottom: 16rpx;
  }

  .sub_title {
    margin-top: 20rpx;
    flex: 1;
    color: #888888;
  }

  .sub_title1 {
    margin-top: 20rpx;
    color: black;
    font-weight: bold;
  }

  .money {
    color: #F9661C;
  }

  .trip {
    font-size: 23rpx;
    color: #F9661C;
  }

  .trip_content {
    font-size: 23rpx;
    color: #888888;
  }
}

.top_bottom {
  margin-top: 30rpx;
  margin-bottom: 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  image {
    width: 43rpx;
    height: 43rpx;
  }

  .top_bottom_text {
    margin-left: 30rpx;
    font-size: 26rpx;
    font-weight: bold;
    color: black;
  }

  .btn_content {
    margin: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
}

.bottom {
  align-items: center;
  padding: 20rpx 30rpx 20rpx 10rpx;
  display: flex;
  width: 100%;

  .pay_content {
    flex: 1;
    margin-left: 20rpx;
  }

  .money {
    font-size: 36rpx;
    font-weight: bold;
    color: #F9661C;
  }

  .money_tip {
    color: #666666;
  }

  .order_pay {
    border-radius: 300rpx;
    margin-left: 20rpx;
    color: white;
    padding: 16rpx 60rpx;
    text-align: center;
    background: linear-gradient(270deg, #FEB85A 0%, #FC754A 100%);
  }

  .order_pay1 {
    border-radius: 300rpx;
    margin-left: 20rpx;
    color: white;
    padding: 16rpx 60rpx;
    text-align: center;
    background: linear-gradient(270deg, #58cea0 0%, #58cea0 100%);
  }
}

.sub_title_label {
  font-size: 20rpx;
  color: white;
  background-color: #1db9ff;
  padding: 1rpx 10rpx;
  border-radius: 60rpx;
  margin-right: 10rpx;
  text-align: center;
  height: 36rpx;
  line-height: 36rpx;
}

.sub_title_label1 {
  font-size: 20rpx;
  color: #333333;
  background-color: #FECC32;
  padding: 1rpx 20rpx;
  border-radius: 60rpx;
  margin-right: 10rpx;
  text-align: center;
  height: 36rpx;
  line-height: 36rpx;
}

.sub_title_label2 {
  font-size: 20rpx;
  color: #FFFFFF;
  width: 68rpx;
  text-align: center;
  background-color: #db2727;
  padding: 4rpx 0;
  border-radius: 60rpx;
  margin-right: 10rpx;
}

.order_item {
  background-color: white;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 16rpx;
  font-size: 28rpx;

  .order_no {
    display: flex;
    align-items: center;
  }

  .order_time {
    margin-top: 20rpx;
  }

  .order_user_pay {
    display: flex;
    margin-top: 20rpx;

    .user_pay_content {
      flex: 1;
    }

    .pay_money {
      color: #F9661C;
    }
  }
}

.labs {
  margin-top: 20rpx;
  display: flex;
  align-items: center;
  font-size: 24rpx;

  .pj {
    border-radius: 600rpx;
    padding: 10rpx 20rpx;
    background-color: #07AA83;
    color: white;
    margin-right: 10rpx;
  }

  .qrs {
    border-radius: 600rpx;
    padding: 10rpx 20rpx;
    background-color: #FECC32;
    color: white;
  }

  .null {
    flex: 1;
  }

  image {
    width: 32rpx;
    height: 32rpx;
  }
}

.images {
  margin-top: 20rpx;
  display: flex;
  //justify-content: space-between;

  image {
    margin-right: 10rpx;
    height: 300rpx;
    width: 218rpx;
    background-color: #E3E3E3;
    border-radius: 10rpx;
    border: #FECC32 solid 2rpx;
  }

  :last-child {
    margin-right: 0;
  }
}

/* 支付 */
.pay_type {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  text-align: center;
  margin-top: 20rpx;
}

.popup_content {
  padding-bottom: 50rpx;
}

.pay-way {
  margin-top: 20rpx;
  padding: 10rpx 30rpx;
  background-color: #FFFFFF;
  border-radius: 40rpx;
}

.radio-list {
  background-color: #FFFFFF;
}

.radio-one {
  //display: flex;
  //align-items: center;
  //justify-content: space-between;
  //margin: 30rpx 0;
}

.radio-left {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 26rpx 0;
  border-top: #EAEAEA solid 1rpx;
}

.radio-left image {
  width: 58rpx;
  height: 58rpx;
  display: inline-block;
}

.radio-int {
  font-size: 26rpx;
  margin-left: 20rpx;
}

.check_icon {
  width: 34rpx;
  height: 34rpx;
  position: relative;
  top: 0;
  margin-right: 7rpx;
}

.dianji {
  margin-left: auto;

  image {
    width: 38rpx !important;
    height: 38rpx !important;
    opacity: .9;
  }
}

.submit {
  margin: 0 20rpx;
  font-weight: bold;
  height: 100rpx;
  background: linear-gradient(270deg, #FEB85A 0%, #FC754A 100%);
  border-radius: 60rpx;
  font-size: 36rpx;
  color: white;
  line-height: 100rpx;
}

.submit text {
  font-size: 48rpx;
  color: #ff5339;
}
</style>
